

<style>
  .commentManage .option-div{
    height: 35px;
    width: 800px;
    margin-bottom: 20px;
  }

  .commentManage .option-div input{
    background-color: none;
    border: 1px solid #ccc;
    border-radius:5px ;
    height: 32px;
    width: 168px;
    padding-left:15px ;
    color: #ccc;
    border:1px solid #2cb5ac;
  }

  .commentManage .option-div .input-user{
    width: 240px;
    float: left;
    margin-right: 10px;
  }
  .commentManage .option-div .option-status{
    width: 230px;
    float: left;
    position: relative;
  }
  .commentManage .option-div .option-status select{
    width: 150px;
    height: 35px;
    border-radius: 5px;
    border:1px solid #2cb5ac;
  }

  .commentManage .search{
    border: none;
    line-height: 35px;
    background: none;
    font-size: 12px;
    color: #2cb5ac;
  }
  .option-div span{
    font-weight: 700;
    color: #777;
  }

  .commentManage .commentManageTable{
  width: 100%;
  line-height: 40px;
  border-collapse: collapse;
  text-align: left;
  color: #777;
  font-size:12px ;
  
}
.commentManage .commentManageTable td{
  border: none;
  border-bottom: 1px solid rgb(194, 192, 192);
}
.commentManage .commentManageTable a{
  color: #2cb5ac;
}
.commentManage .commentManageTable th:last-child{
  text-align: center;
}
.commentManage .commentManageTable td:last-child{
  text-align: center;
  
}
.commentManage .commentManageTable td:nth-child(4){
  color: orange;
}
</style>




<div class="commentManage">
  <div class="option-div">
    <div class="option-status">
      <span>审核状态</span>
      <select name="roles" id="">
        <option disabled selected hidden>请选择</option>
        <option value="">待审核</option>
        <option value="">未审核</option>
        <option value="">通过</option>
      </select>
    </div>
    <div class="input-user">
      <span>关键字</span>
      <input type="text" placeholder="请输入关键字" ></div>
    <button class="search">搜索</button>
  </div>
  <div>
    <table class="commentManageTable">
      <thead>
        <th>序号</th>
        <th>评论内容</th>
        <th>评论日期</th>
        <th>状态</th>
        <th>操作</th>
      </thead>
      <tbody>
        <td>序号</td>
        <td>评论内容</td>
        <td>评论日期</td>
        <td>状态</td>
        <td>操作</td>
      </tbody>
    </table>
  </div>
  <div class="page-div">
  
  </div>
</div>


<script>
  var commentDataModel={
      total:0,
        params:{
              page:1,
              pageSize:10,
              }
    }
    commentPageQuery(commentDataModel.params);
  
    function commentPageQuery(params){
   myAjax.get(api.COMMENT_PAGEQUERY,params).then((res)=>{
    commentDataModel.total = res.data.total;
      //清空节点
      $(".commentManage tbody").empty();
      console.log(res)
      let arr=res.data.list;
      if(arr.length>0){
        arr.forEach((item,index)=>{
          $(".commentManage tbody").append($(`
          <tr>
          <td>${index+1}</td>
          <td>${item.content}</td>
          <td>${new Date(item.commentTime).toLocaleString()}</td>
          <td>${item.status}</td>
          <td>
            <a href="#">删除</a>
            <a href="#">通过</a>
            <a href="#">不通过</a>
          </td>
        </tr>`))
        })
      }
    })
    }
    setTimeout(()=>{
        $('.page-div').pagination(commentDataModel.total,{
        //设置每页显示的条数
        showData:commentDataModel.params.pagesize,
        prev_text:'<',
        next_text:'>',
        callback(page){
          console.log(page);
          commentDataModel.params.page=page+1;
          commentPageQuery(commentDataModel.params);
        }
      })
      },1000)
</script>